<template>
    <div>
        <el-menu size='small' :default-active="activeIndex" style="margin-bottom:18px;" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">文章信息</el-menu-item>
        </el-menu>

        <!-- 表单 -->
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <p class="p_one">
                <el-form-item label="标题 " prop="title">
                    <el-input size="small" style="width:100%;" placeholder="请输入标题" v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="作者 " prop="write">
                    <el-input size="small" style="width:100%;" placeholder="请输入作者" v-model="form.write"></el-input>
                </el-form-item>
            </p>

            <p class="p_two">
                <el-form-item label="文章分类 " prop="selects">
                    <el-select size="small" @change="selsFun" v-model="form.selects" placeholder="请选择分类">
                        <el-option
                        v-for="(v,i) in options"
                        :key="i"
                        :label="v.title"
                        :value="v.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章简介 " prop="text">
                    <el-input
                    type="textarea"
                    :rows="1"
                    placeholder="请输入文章简介"
                    v-model="form.text">
                    </el-input>
                </el-form-item>
            </p>

            <p class="p_three">
                <el-form-item label="图文封面 " prop="img">
                    <div class="avatar-uploader1" @click="imglistFun">
                        <img style="width:66px;" class="img1" v-if="form.img" :src="form.img">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                </el-form-item>
            </p>

            <el-menu size='small' :default-active="activeIndex" style="margin-bottom:18px;" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">文章内容</el-menu-item>
            </el-menu>

            <p class="p_four">
                <el-form-item label="文章内容 " prop="nei">
                    <el-input
                    type="textarea"
                    :rows="1"
                    placeholder="请输入文章内容"
                    v-model="form.nei">
                    </el-input>
                </el-form-item>
            </p>

            <el-menu size='small' :default-active="activeIndex" style="margin-bottom:18px;" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">其他设置</el-menu-item>
            </el-menu>

            <p class="p_four">
                <el-form-item label="原文链接 "  prop="jie">
                    <el-input size="small" style="width:100%;" placeholder="请输入链接" v-model="form.jie"></el-input>
                </el-form-item>
            </p>

            <p class="p_four">
                <el-form-item label="banner显示 "  prop="banner">
                    <el-radio-group v-model="form.banner">
                        <el-radio label="1">显示</el-radio>
                        <el-radio label="0">不显示</el-radio>
                    </el-radio-group>
                </el-form-item>
            </p>

            <p class="p_four">
                <el-form-item label="热门文章 " prop="hot">
                    <el-radio-group v-model="form.hot">
                        <el-radio label="1">显示</el-radio>
                        <el-radio label="0">不显示</el-radio>
                    </el-radio-group>
                </el-form-item>
            </p>
            
            
            <el-form-item>
                <el-button size="small" type="primary" @click=" form.title1 === '添加' ? submitForm('form') : edit('form') ">提交</el-button>
            </el-form-item>
        </el-form>

        <ImgDiv :is-showt='zhe' @isShowS="isShowSFun" @imgArr="imgArrFun" @imgArr1="imgArr1Fun"></ImgDiv>
    </div>
</template>

<script>
import ImgDiv from '../../components/imgDiv'
import {writersel,writeradd} from '../../api/content/books'
export default {
    components:{
        ImgDiv
    },
    props:['form'],
    data(){
        return {
            activeIndex:'1',
            options: [],
            zhe:{
                isShow:false,
                titlet:'',
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                selects: [
                    { required: true, message: '请选择文章分类', trigger: 'change' }
                ],
                write: [
                    { required: true, message: '请输入作者', trigger: 'change' }
                ],
                text: [
                    { required: true, message: '请输入简介', trigger: 'blur' }
                ],
                nei: [
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ],
                img: [
                    { required: true, message: '请至少选择一个图片', trigger: 'change' }
                ]
            }
        }
    },
    created(){
        this.sels();
    },
    methods:{
        isShowSFun(val){
            this.zhe.isShow=val
        },

        selsFun(){

        },
        // 返回用户头像
        // imgArrFun(val){
        //     this.zhe.isShow=val.isShow
        //     this.formList.pics=val.imgArr
        // },
        // 返回评价图片
        imgArr1Fun(val){
            this.zhe.isShow=val.isShow
            this.formList.avatar=val.imgArr[0]
        },
        // 图片返回的数据
        imgArrFun(val){
            this.form.img = val.imgArr[0];
            console.log(val);
        },
        //编辑按钮
        edit(formName){
            console.log(this.form);
            let ids = this.form.id;

            this.$refs[formName].validate((valid) => {
            if (valid) {
                let banners = this.form.banner === '1' ? 1 : 0;
                let hots = this.form.hot === '1' ? 1 : 0;
                // console.log(banners,hots);
                writeradd({
                    id:Number(ids),
                    cid:this.form.selects,
                    title:this.form.title,
                    author:this.form.write,
                    synopsis:this.form.text,
                    image_input:this.form.img,
                    is_banner:banners,
                    is_hot:hots,
                    content:this.form.nei,
                    url:this.form.jie
                }).then(res => {
                    //console.log(res.data);
                    if (res.data.status === 200) {
                        this.$message.success('修改成功')
                        this.$router.push('/writer');
                    }else{
                        this.$message.error('修改失败')
                    }
                },err => {
                    console.log(err);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let banners = this.form.banner === '1' ? 1 : 0;
                let hots = this.form.hot === '1' ? 1 : 0;
                // console.log(banners,hots);
                writeradd({
                    id:this.form.id,
                    cid:this.form.selects,
                    title:this.form.title,
                    author:this.form.write,
                    synopsis:this.form.text,
                    image_input:this.form.img,
                    is_banner:banners,
                    is_hot:hots,
                    content:this.form.nei,
                    url:this.form.jie
                }).then(res => {
                    console.log(res.data);
                    if (res.data.status === 200) {
                        this.$message.success('添加成功')
                        this.$router.push('/writer');
                    }else{
                        this.$message.error('添加失败')
                    }
                },err => {
                    console.log(err);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //下拉请求
        sels(){
            writersel().then(res => {
                //console.log(res.data);
                if (res.data.status == 200) {
                    this.options = res.data.data;
                }
            },err => {
                console.log(err);
            })
        },
        // 用户头像
        imglistFun(){
            this.zhe.isShow=true
            this.zhe.titlet='请选择用户头像'
            console.log(this.zhe);
        },
    }
}
</script>

<style lang="scss">
    .p_one{
        padding: 0 60px;
        width: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .p_two{
        padding: 0 60px;
        width: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .p_three{
        padding: 0 60px;
        box-sizing: border-box;
        width: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .p_four{
        padding: 0 60px;
        box-sizing: border-box;
        width: 70%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-form>.p_four>.el-form-item>.el-form-item__label{
        white-space: nowrap;
    }

    .avatar-uploader1{
    width: 66px;
    height: 66px;
    border: 1px dashed #ccc;
    border-radius: 6px;
}
.avatar-uploader1:hover{
        border-color: #409EFF;
    }

    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 66px;
    height: 66px;
    line-height: 66px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>